<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	<title>EasyWebSocket - a WebSocket client to broadcast messages to webpages</title> 
	
	<style type="text/css"> 
	body {
		margin-top	: 1.0em; 
		background-color: #22252A;
		font-family	: "Helvetica,Arial,FreeSans";
		color		: #fff;
	}
	#container {
		margin	: 0 auto;
		width	: 960px;
	}
	h1 {
		font-size	: 3.8em;
		text-align	: center;
		margin-top	: 20px;
		margin-bottom	: 20px;
	}
	h1 .small { font-size: 0.4em; }
	h1 a {
		color		: #cd5;
		text-decoration: none
	}
	h2 {
		font-size: 1.5em; color: lightSteelBlue;
	}
	h3 {
		text-align: center; color: #b523ab;
	}
	a {
		color: #cd5;
	}
	.description {
		font-size	: 1.2em;
		margin-bottom	: 20px;
		margin-top	: 10px;
		font-style	: italic;
		text-align	: center;
	}
	pre {
		font-size	: 130%;
		background	: #020202;
		color		: #ccc;
		padding		: 15px;
		border-radius	: 20px;
		border		: solid;
		border-width	: 2px;
		border-color	: #888;
		text-shadow	: 0px 1px 0px #333;
	}
	pre span.change {
		color		: #B43;
	}
	hr {	border		: 0;
		width		: 80%;
		border-bottom	: 1px solid #aaa;
		margin-bottom	: 3em;
	}
	.tutorial {
		font-weight	: bolder;
	}
	.tutorial b {
		font-size	: 1.2em;
	}
	.footer { text-align:center; padding-top:30px; font-style: italic; }
	p {
		font-size	: 1.2em;
		letter-spacing	: 0.05em;
		word-spacing	: 0.1em;
/*		text-shadow	: 0px 1px 0px #FFF;
*/	}
	</style> 
</head>  
<body>
	<div id="container"> 
		<h1>
			<a href="http://easywebsocket.org">EasyWebSocket</a>
		</h1> 
		<div class="description"> 
			a WebSocket client to broadcast messages to webpages
		</div>
		<hr>
		<p>
			You want to use websockets ? You want to broadcast messages to all connected clients ?
			You don't want to worry about browser compatiblity ?
			You don't want to set up a server ? Here's all the code you need.
		</p>
			<pre>
	<span class="change">&lt;script src="http://easywebsocket.org/easyWebSocket.min.js"&gt;&lt;/script&gt;</span>
	&lt;script&gt;
	    var socket = new <span class="change">Easy</span>WebSocket("ws://example.com/resource");
	    socket.onopen = function(){
		socket.send("hello world!")
	    }
	    socket.onmessage = function(event){
		alert("received "+ event.data)
	    }
	&lt;/script&gt;</pre>
			<p>
				<b>EasyWebSocket</b> is simple websockets broadcasting. It is perfect
				for a quick prototype.. getting it going quick.
				90% this is all you need if you're doing websocket something.
				The API is copied on the <a href="http://dev.w3.org/html5/websockets/">WebScocket standard API</a>, thus
				compatible and easy to learn.
			</p>
			<p class="tutorial">				
				<b>Step 1:</b> You connect the socket to a given url
			</p>
			<p class="tutorial">
				<b>Step 2:</b> What you send() thru this socket is sent to all sockets connected to the same url
			</p>
			<p>
			Just include this code in your webpage and it works. See it <a href="example/example.html">live</a>.
			
			For more information, look at <a href="https://docs.google.com/present/view?id=dhng4bgf_47gb6txzds">slides</a> of
			a talk i did about it.

			Additionnaly you can look at a little <a href="contrib/chat">chat demo</a> on top of it or
			another one which <a href="contrib/monitor/">monitor latency in real time</a>.
			</p>
			<p>
			EasyWebSocket is written by <a href="http://jetienne.com">Jerome Etienne</a>.
			The code is available on github at <a href="http://github.com/jeromeetienne/EasyWebsocket">EasyWebSocket</a>
			under <a href="https://github.com/jeromeetienne/EasyWebsocket/raw/master/MIT-LICENSE.txt">MIT license</a>.
			</p>
	</div>

	<!-- multiple mouse cursor by @stagas -->
	<style> 
		.cursor {
			position	: absolute;
			width		: 24px;
			height		: 24px;
			background-image:url("");
		}
	</style> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
	<script src="./easyWebSocket.min.js"></script> 
	<script> 	 
		jQuery(function() {
			var socket = new EasyWebSocket("ws://cursors/moving/smooth")
				, me = Math.floor(Math.random() * 1000000).toString(32)
				, cursors = {}
				, tail = [];
			 
			cursors[me] = jQuery('<div/>').attr('id', me).addClass('cursor').appendTo('body');
			socket.onopen	= function() {
				setInterval(function(){
					if( mouseCurX == mouseOldX && mouseCurY == mouseOldY )	return;
					socket.send(me + ' ' + tail.join(' '));
					tail = [];
					mouseOldX	= mouseCurX;
					mouseOldY	= mouseCurY;
				}, 100)
			}
			 
			socket.onmessage = function(event) {
				var data = event.data.split(' ')
			    , id = data.shift();
			  
			  if (id === me) return
			 
			  if (typeof cursors[id] === 'undefined') {
					cursors[id] = jQuery('<div/>').attr('id', id).addClass('cursor').appendTo('body');
				}
			  
			  var inc = 0
			    , mul = Math.floor(100 / (data.length || 1));
			  data.forEach(function(xy) {
			    inc++;
			    setTimeout(function() {
			      xy = xy.split(',');
			      cursors[id].css({ left: xy[0]  + 'px', top: xy[1] + 'px' });
			    }, mul * inc);
			  })
			}
			 
			var mouseCurX	= 0;
			var mouseCurY	= 0;
			var mouseOldX	= 0;
			var mouseOldY	= 0;
			 
			$('body').bind('mousemove', function(e){
				mouseCurX	= e.pageX;
				mouseCurY	= e.pageY;
				tail.push([ mouseCurX, mouseCurY ]);
				cursors[me].css({ left: (mouseCurX+2) + 'px', top: (mouseCurY+3) + 'px' });
			})		 
		})
	</script> 
	<!-- google analytic support -->
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-4037844-15']);
		_gaq.push(['_trackPageview']);
		(function() {
		  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
	<!-- follow me on twitter --> 
	<a href="http://www.twitter.com/jerome_etienne"><img style="position: absolute; top: 10px; right: 10px; border: 0;" src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow jerome_etienne on Twitter"/></a> 
	<!-- github ribbon --> 
	<a href="https://github.com/jeromeetienne/easywebsocket"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://assets0.github.com/img/ce742187c818c67d98af16f96ed21c00160c234a?repo=&url=http%3A%2F%2Fs3.amazonaws.com%2Fgithub%2Fribbons%2Fforkme_left_gray_6d6d6d.png&path=" alt="Fork me on GitHub"></a> 
</body> 
</html> 